<script lang="ts" setup>
import UseTab from '@/components/use-tabs/index.vue'
import TableList from './table-list.vue'
import { RecommendStatus } from '@/models/recommend'
import { Tab } from '@/models/sys'

const props = withDefaults(
  defineProps<{
    isTab: boolean
  }>(),
  {},
)

const tabState = reactive<{
  value: string
  list: Tab[]
}>({
  value: String(RecommendStatus.Pending),
  list: [
    {
      title: '待回复',
      value: String(RecommendStatus.Pending),
      badgeProps: {
        modelValue: 0,
        max: 99,
        right: '-8px',
      },
    },
    { title: '已回复', value: String(RecommendStatus.Sent) },
  ],
})

const tablePendingRef = ref<InstanceType<typeof TableList>>()
const tableSentRef = ref<InstanceType<typeof TableList>>()

function badgeUpdate(value: number) {
  tabState.list[0].badgeProps.modelValue = value
}
</script>

<template>
  <view class="relative pt-2" style="height: 100%">
    <UseTab :list="tabState.list" v-model="tabState.value"></UseTab>
    <view class="scroll-views" v-show="tabState.value === String(RecommendStatus.Pending)">
      <TableList
        ref="tablePendingRef"
        :is-check="tabState.value === String(RecommendStatus.Pending)"
        :is-tab="isTab"
        :status="RecommendStatus.Pending"
        @badge-update="badgeUpdate"
      ></TableList>
    </view>
    <view class="scroll-views" v-show="tabState.value === String(RecommendStatus.Sent)">
      <TableList
        ref="tableSentRef"
        :is-check="tabState.value === String(RecommendStatus.Sent)"
        :is-tab="isTab"
        :status="RecommendStatus.Sent"
      ></TableList>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.scroll-views {
  height: calc(100% - 110rpx);
  // margin-top: 15rpx;
}
</style>
